---
title: "Background Size"
description: "Utilities for controlling the background size of an element's background image."
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/backgroundSize'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

Use `bg-auto` to display the background image at its default size.

```html amber
<template preview>
  <div class="w-full bg-amber-200 h-48 bg-auto bg-no-repeat bg-center" style="background-image:url('/img/placeholder-amber.svg');">
  </div>
</template>

<div class="**bg-auto** bg-no-repeat bg-center ..." style="background-image: url(...)"></div>
```

## Cover

Use `bg-cover` to scale the background image until it fills the background layer.

```html emerald
<template preview>
  <div class="w-full mx-auto bg-emerald-200 h-96 bg-center bg-cover" style="background-image:url('/img/placeholder-emerald.svg');">
  </div>
</template>

<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
```

## Contain

Use `bg-contain` to scale the background image to the outer edges without cropping or stretching.

```html indigo
<template preview>
  <div class="w-full bg-indigo-300 h-48 bg-center bg-no-repeat bg-contain" style="background-image:url('/img/placeholder-indigo.svg');">
  </div>
</template>

<div class="bg-contain bg-center ..." style="background-image: url(...)"></div>
```

## Responsive

To control the size of an element's background image at a specific breakpoint, add a `{screen}:` prefix to any existing background size utility. For example, adding the class `md:bg-contain` to an element would apply the `bg-contain` utility at medium screen sizes and above.

```html
<div class="bg-auto **md:bg-contain** ..."></div>
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

By default, Tailwind provides utilities for `auto`, `cover`, and `contain` background sizes. You can change, add, or remove these by editing the `theme.backgroundSize` section of your config.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundSize: {
        'auto': 'auto',
        'cover': 'cover',
        'contain': 'contain',
+       '50%': '50%',
+       '16': '4rem',
      }
    }
  }
```

### Variants

<Variants plugin="backgroundSize" />

### Disabling

<Disabling plugin="backgroundSize" />
